<template>
    <div class="container course-file-list">
        <!-- head -->
        <div class="headers">
            <div class="header-lefts">
                <el-radio-group
                    style="width: 100%"
                    v-model="tabName"
                    @change="getTableData(1)"
                    size="small"
                >
                    <el-radio-button
                        label="">
                        全部
                    </el-radio-button>
                    <el-radio-button
                        :label="1">
                        待审核
                    </el-radio-button>
                    <el-radio-button
                        :label="2">
                        审核通过
                    </el-radio-button>
                    <el-radio-button
                        :label="3">
                        未通过
                    </el-radio-button>
                    <el-radio-button
                        :label="4">
                        已删除
                    </el-radio-button>
                </el-radio-group>
            </div>
            <div class="header-rights">
                <el-button
                    type="primary"
                    size="small"
                    @click="fnGobrowse()"
                >浏览量自动增长</el-button>
            </div>
        </div>
        <div class="header">
            <div class="header-box">
                <p class="header-box-title">类目组:</p>
                <el-select
                    v-model="cate_no"
                    filterable
                    placeholder="请选择"
                    size="small"
                    clearable
                    @change="getTableData()"
                >
                    <el-option
                        v-for="item in categoryList"
                        :key="item.cate_no"
                        :label="item.title"
                        :value="item.cate_no"
                    />
                </el-select>
            </div>
            <div class="header-box">
                <p class="header-box-title">一二级类目:</p>
                <el-cascader
                    v-model="header.class"
                    @change="getTableData()"
                    :options="classList"
                    size="small"
                    :props="{
                        checkStrictly: true
                    }"
                    clearable/>
            </div>
            <div class="header-box">
                <p class="header-box-title">视频名称:</p>
                <el-input
                    v-model="header.company"
                    placeholder="请输入课程名称"
                    class="companySearch"
                    suffix-icon="el-icon-search"
                    size="small"
                    clearable
                    @change="getTableData()"
                    @keyup.enter.native="getTableData(1)"
                />
            </div>
            <div class="header-box">
                <p class="header-box-title">浏览自增长:</p>
                <el-select
                    v-model="header.brower"
                    filterable
                    placeholder="请选择"
                    size="small"
                    clearable
                    @change="getTableData()"
                >
                    <el-option
                        v-for="item in browerlist"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="header-box">
                <p class="header-box-title">上架状态:</p>
                <el-select
                    v-model="header.upper"
                    filterable
                    placeholder="请选择"
                    size="small"
                    clearable
                    @change="getTableData()"
                >
                    <el-option
                        v-for="item in upperList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="header-box">
                <p class="header-box-title">是否设置学校权限:</p>
                <el-select
                    v-model="school_filter_status"
                    filterable
                    placeholder="请选择"
                    size="small"
                    clearable
                    @change="getTableData()"
                >
                    <el-option
                        v-for="item in filterList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="header-box">
                <p class="header-box-title">学习模块会显示:</p>
                <el-select
                    v-model="header.show"
                    filterable
                    placeholder="请选择"
                    size="small"
                    clearable
                    @change="getTableData()"
                >
                    <el-option
                        v-for="item in showList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                <el-popover
                    placement="top-start"
                    width="200"
                    trigger="hover"
                    content="此状态不表示视频本身的显示与否，而是控制其相对工作模块，在学习模块是否要显示。"
                >
                    <el-button
                        slot="reference"
                        class="el-button-provide"
                    >
                        <i
                            class="el-icon-question"
                            style="fontSize: 20px"
                        />
                    </el-button>
                </el-popover>
            </div>
        </div>
        <!-- /head -->

        <!-- 内容 -->
        <div
            class="table-wrapper"
            style="marginTop: 10px"
        >
            <el-table
                :data="tableData"
                height="100%"
                style="width: 100%;"
                border
                ref="studeyList"
                @select="fnSelect"
                @select-all="fnSelectAllTop"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="40"
                    fixed="left"
                />
                <el-table-column
                    label="ID"
                    type="index"
                />
                <el-table-column
                    prop="company_name"
                    label="上传者名称"
                    show-overflow-tooltip
                    :width="130"
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    prop="course_name"
                    label="视频名称"
                    show-overflow-tooltip
                    :width="130"
                    :formatter="emptyFormatter"
                >
                    <template slot-scope="scope">
                        <span
                            class="cursor-font"
                            @click="fnOpenvideo(scope.row)">{{ scope.row.course_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="course_no"
                    label="唯一编号"
                    :width="130"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    prop="cate_name_str"
                    label="所属类目组"
                    :width="130"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    prop="type_name"
                    label="所属分类"
                    show-overflow-tooltip
                    :width="130"
                    :formatter="emptyFormatter"
                >
                    <template slot-scope="scope">
                        {{ scope.row.type_name ? scope.row.type_name : '' }} - {{ scope.row.sub_type_name ? scope.row.sub_type_name : '' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="school_filter_status"
                    label="是否设置学校权限"
                    show-overflow-tooltip
                    :width="150"
                    :formatter="emptyFormatter"
                >
                    <template slot-scope="scope">
                        <p
                            v-if="scope.row.school_filter_status == 1"
                            @click="fnSetAuthor(scope.row)"
                            class="cursor-font"
                        >是</p>
                        <p v-if="scope.row.school_filter_status == 0">否</p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="course_sort_global"
                    label="排序"
                >
                    <template slot-scope="scope">
                        <div class="sort-wrap">
                            {{ scope.row.course_sort_global }}
                            <span class="sort-spliter" />
                            <el-button
                                type="text"
                                class="btn-sort"
                                @click="fnEditSort(scope.row)"
                            >
                                <i class="el-icon-edit" />
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="course_view_base"
                    :width="100"
                    label="显示浏览量"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    prop="course_view"
                    :width="100"
                    label="真实浏览量"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    prop="auto_increase"
                    :width="120"
                    label="浏览量自增长"
                >
                    <template slot-scope="scope">
                        <span
                            v-if="scope.row.auto_increase == 1"
                        >是</span>
                        <span v-if="scope.row.auto_increase == -1">否</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="审核状态"
                    width="140px"
                >
                    <template slot-scope="scope">
                        <div
                            class="audit_status"
                            v-if="scope.row.status == 1"
                        >
                            待审核
                        </div>
                        <div
                            class="audit_status"
                            v-if="scope.row.status == 2"
                        >
                            审核通过
                        </div>
                        <el-popover
                            placement="bottom"
                            title="不通过理由"
                            width="200"
                            trigger="hover"
                            :content="scope.row.audit_reason"
                            v-else-if="scope.row.status == 3"
                        >
                            <el-button
                                slot="reference"
                                type="text"
                                class="status fail"
                            >
                                审核不通过
                            </el-button>
                        </el-popover>
                        <div
                            class="status"
                            v-else-if="scope.row.status == 4"
                        >
                            已删除
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="course_status"
                    label="上架状态"
                    :width="120"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                >
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.course_status"
                            :active-value="1"
                            :inactive-value="0"
                            @change="fnSetModify(scope.row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="course_show_home"
                    :width="160"
                    :render-header="renderHeaderPay"
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.course_show_home == 1">已显示</span>
                        <span v-if="scope.row.course_show_home == 0">已隐藏</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="创建时间"
                    :width="170"
                >
                    <template slot-scope="scope">
                        {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    fixed="right"
                    :width="200"
                >
                    <template slot-scope="scope">
                        <div>
                            <el-button
                                type="text"
                                :disabled=" !(scope.row.status == 1 || scope.row.status == 3) "
                                @click="fnChangeVerifyStatus(scope.row, 1)"
                            >
                                通过
                            </el-button>
                            <el-button
                                type="text"
                                :disabled="!(scope.row.status == 1 || scope.row.status == 2)"
                                @click="fnChangeVerifyStatus(scope.row, 0)"
                            >
                                不通过
                            </el-button>
                            <el-button
                                type="text"
                                @click="fnGoEdit(scope.row.course_no, 1, scope.row)"
                            >
                                编辑
                            </el-button>
                            <el-button
                                type="text"
                                @click="fnChangeStatus(scope.row)"
                            >
                                {{ scope.row.course_show_home == 0 ? '显示' : '隐藏' }}
                            </el-button>
                            <el-button
                                type="text"
                                v-if="scope.row.status <= 3"
                                @click="fnDelete(scope.row)"
                                style="marginLeft:0px"
                            >
                                删除
                            </el-button>
                            <el-button
                                type="text"
                                v-if="scope.row.status == 4"
                                @click="fnRecovery(scope.row)"
                            >
                                恢复
                            </el-button>
                            <el-button
                                type="text"
                                @click="fnSetAuthor(scope.row)"
                            >
                                设置学校权限
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 内容 -->

        <!-- 上传文件弹窗 -->
        <el-dialog
            title="课程文件编辑"
            append-to-body
            width="700px"
            custom-class="dialog-file-edit"
            :visible.sync="dialogEditVisible"
            :before-close="fnDialogBeforeClose"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form
                :model="formEdit"
                :rules="rules"
                ref="formEdit"
                class="demo-ruleForm"
                label-position="left"
                label-width="90px"
            >
                {{ formEdit.company_name }}
                <el-form-item
                    label="企业名称"
                    prop="hire_no"
                >
                    <el-select
                        v-model="formEdit.hire_no"
                        filterable
                        remote
                        :disabled="chooseDisable"
                        placeholder="输入手机号/企业名称"
                        :remote-method="fnSearchShop"
                        @change="handleSelect"
                        size="small"
                        :loading="loading">
                        <el-option
                            v-for="item in shopListChoose"
                            :key="item.shop_no"
                            :label="item.shop_title"
                            :value="item.shop_no"/>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="视频分类"
                    size="small"
                    prop="courseType"
                >
                    <el-cascader
                        v-model="formEdit.courseType"
                        @change="getTableData()"
                        :options="classList"
                        size="small"
                        :props="{ expandTrigger: 'hover' }"
                        clearable/>
                </el-form-item>
                <el-form-item
                    label="文件"
                    prop="fileList"
                >
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :http-request="fnUploadFile"
                        accept="video/MP4"
                        :show-file-list="false"
                        :on-change="fnChangeUpload('formEdit')"
                        :disabled="uploadingFile"
                    >
                        <el-button
                            size="small"
                            type="primary"
                            :disabled="uploadingFile"
                        >
                            点击上传
                        </el-button>
                        <p
                            slot="tip"
                            class="el-upload__tip"
                        >
                            只能上传"mp4"格式文件
                        </p>
                    </el-upload>
                    <ul class="el-upload-list el-upload-list--text">
                        <li
                            class="el-upload-list__item is-uploading"
                            :class="{'is-uploading': item.percent < 100, 'is-success': item.percent >= 100}"
                            v-for="(item, index) in formEdit.fileList"
                            :key="index"
                        >
                            <a class="el-upload-list__item-name">
                                <i class="el-icon-document" />
                                {{ item.name }}
                            </a>
                            <label class="el-upload-list__item-status-label">
                                <i class="el-icon-upload-success el-icon-circle-check" />
                            </label>
                            <i
                                class="el-icon-close"
                                @click="fnUploadRemove"
                            />
                            <div
                                role="progressbar"
                                aria-valuenow="11"
                                aria-valuemin="0"
                                aria-valuemax="100"
                                class="el-progress el-progress--line"
                                v-if="item.percent < 100"
                            >
                                <div class="el-progress-bar">
                                    <div
                                        class="el-progress-bar__outer"
                                        style="height: 2px;"
                                    >
                                        <div
                                            class="el-progress-bar__inner"
                                            :style="'width: '+item.percent+'%;'"
                                        />
                                    </div>
                                </div>
                                <div
                                    class="el-progress__text"
                                    style="font-size: 12.8px;"
                                >
                                    {{ item.percent }}%
                                </div>
                            </div>
                        </li>
                    </ul>
                </el-form-item>
                <el-form-item
                    label="视频名称"
                    prop="course_name"
                >
                    <el-input
                        size="small"
                        placeholder="请输入,不超过40个字"
                        v-model="formEdit.course_name"
                    />
                </el-form-item>
                <!-- banner跳转 -->
                <el-row
                    class='row-flex'
                    style="display:flex"
                >
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        label="跳转链接:"
                    >
                        <el-cascader
                            :props="{ expandTrigger: 'hover' }"
                            :placeholder="setJump"
                            size="small"
                            :filterable="true"
                            v-model="formData.app_action"
                            :options="linkSelectData"
                            @change="handleChange()"
                            ref="myCascader"
                            style="width:420px"
                        />
                    </el-form-item>
                    <span
                        style="color:#409EFF;cursor:pointer;margin:8px 0 0 10px"
                        @click="fnClearApp()"
                    >清空链接</span>
                </el-row>
                <el-form-item
                    size="small"
                >
                    <!-- 外链输入框 -->
                    <div
                        v-for="(item,index) in param"
                        :key="index"
                    >
                        <div v-if="item.type == 'text'">
                            <el-input
                                placeholder="请输入链接"
                                style="width: 300px"
                                v-model="formData.jump_url"
                                @input="getJump"
                                clearable
                            >
                                <template
                                    class="param"
                                    slot="prepend">{{ item.title }}</template>
                            </el-input>
                            <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p>
                        </div>
                    </div>
                    <!-- 外链输入框 -->

                    <!-- 内链选择框 -->
                    <div
                        v-for="(item,index) in paramCont"
                        :key="index"
                    >
                        <div
                            v-if="paramCont.length == 2 "
                            style="display:flex;marginBottom: 10px"
                        >
                            <p class="el-select-title">{{ item.title }}</p>
                            <el-select
                                v-model="list[index]"
                                filterable
                                placeholder="请选择"
                                @change="getLink"
                                style="marginLeft: -5px;width:239px"
                            >
                                <el-option
                                    v-for="item in options[index]"
                                    :key="item.value"
                                    :label="item.title"
                                    :value="item.value"/>
                            </el-select>
                            <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p>
                        </div>
                        <div
                            v-if="item.type == 'select' && paramCont.length == 1 "
                            style="display:flex;marginBottom: 10px"
                        >
                            <p class="el-select-title">{{ item.title }}</p>
                            <el-select
                                v-model="formData.jump_url"
                                filterable
                                placeholder="请选择"
                                @change="getJump"
                                style="marginLeft: -5px;width:239px"
                            >
                                <el-option
                                    v-for="item in options[index]"
                                    :key="item.value"
                                    :label="item.title"
                                    :value="item.value"/>
                            </el-select>
                            <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p>
                        </div>
                        <div v-if="item.type == 'text'">
                            <el-input
                                placeholder="请输入链接"
                                style="width: 300px"
                                v-model="formData.jump_url"
                                @input="getJump"
                                clearable
                            >
                                <template
                                    class="param"
                                    slot="prepend">{{ item.title }}</template>
                            </el-input>
                            <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p>
                        </div>
                    </div>
                    <!-- 内链输入框 -->
                </el-form-item>
                <!-- banner跳转 -->
                <el-form-item
                    label="浏览量"
                >
                    <el-input
                        size="small"
                        type="number"
                        placeholder="请输入浏览量"
                        v-model="formEdit.course_view_base"
                    />
                </el-form-item>
                <el-form-item
                    label="上传封面"
                    prop="file_cover"
                >
                    <el-upload
                        class="avatar-uploader-course"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :show-file-list="false"
                        :http-request="fnUploadThumb"
                        :on-change="fnChangeUploadThumb"
                        accept="image/*"
                    >
                        <template v-if="cover">
                            <img
                                :src="formEdit.file_cover"
                                class="avatar"
                            >
                            <div
                                class="state-uploading"
                                v-if="cover.status !== 'success'"
                            >
                                <i class="el-icon-loading" />
                            </div>
                            <label class="el-upload-list__item-status-label">
                                <i class="el-icon-upload-success el-icon-check" />
                            </label>
                        </template>
                        <template v-else>
                            <i class="el-icon-upload" />
                            <span class="el-upload-text">点击上传</span>
                        </template>
                    </el-upload>

                    <span style="display:inline-block;color:#999;margin-left:12px">*建议图片大小:670px*360px(禁用白色背景封面)</span>
                </el-form-item>
                <el-form-item
                    label="排序号"
                    type="number"
                    size="small"
                    prop="course_sort_global"
                >
                    <el-input-number
                        size="small"
                        :controls="false"
                        :precision="0"
                        v-model="formEdit.course_sort_global"
                        style="width: 155px"
                    />
                </el-form-item>
                <div class="dialog-edit-footer">
                    <el-button
                        type="primary"
                        @click="submitForm('formEdit')"
                    >
                        &nbsp;&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;&nbsp;
                    </el-button>
                </div>
            </el-form>
        </el-dialog>
        <!-- 上传文件弹窗 -->

        <!-- 设置视频自动增长 -->
        <el-dialog
            title="自动增长量"
            :visible.sync="dialogVisiblBrowse"
            width="510px"
        >
            <div
                style="marginBottom: 15px;marginLeft:30px"
                v-for="(item,index) in browseList"
                :key="index"
            >
                <el-radio
                    v-model="browse"
                    :label="item.autoinc_no"
                >
                    <span>{{ item.inc_count_min }} - {{ item.inc_count_max }}个/小时</span>
                </el-radio>
            </div>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button
                    @click="dialogVisiblBrowse = false"
                    size="small"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="fnConfirmBrowse()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- /设置视频自动增长 -->

        <!-- 选择学校 -->
        <el-dialog
            title="选择学校"
            width="1048px"
            custom-class="choose-dialog"
            :visible.sync="showChooseSchool"
        >
            <el-cascader
                v-model="selectedCity"
                placeholder="请选择城市"
                :options="cities"
                :props="props"
                filterable
                size="small"
                style="width: 120px;marginBottom:15px"
                @change="fnChangeCity"
            />
            <el-input
                placeholder="请输入搜索内容"
                v-model.trim="searchKey"
                size="small"
                style="width: 380px"
                @keyup.native.enter="fnSearchSchool()"
            >
                <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="fnSearchSchool()"
                />
            </el-input>
            <div
                class="el-tag-school"
                v-if="isSchool"
            >
                <el-tag
                    :key="tag"
                    v-for="tag in selectedSchools"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ JSON.parse(tag).name }}
                </el-tag>
            </div>
            <div class="splider" />
            <div class="school-list">
                <div
                    class="empty"
                    v-if="schoolList.length <= 0"
                >
                    请切换城市
                </div>
                <el-checkbox-group
                    v-model="selectedSchools"
                    size="small"
                    v-else
                >
                    <el-checkbox-button
                        v-for="(school, schoolIndex) in schoolList"
                        :label="JSON.stringify({
                            id: school.id,
                            name: school.name
                        })"
                        :key="schoolIndex"
                    >{{ school.name }}</el-checkbox-button>
                </el-checkbox-group>
            </div>
            <div
                class="el-school-filter"
            >
                <p style="color:#7e8993;paddingRight:8px">设置学校权限:</p>
                <el-switch
                    v-model="filter_status"
                    active-color="#13ce66"
                    :active-value="1"
                    :inactive-value="0"
                />
            </div>
            <el-button
                type="primary"
                size="small"
                class="submit-btn"
                @click="fnSchooldAuthor()"
            >确定</el-button>
        </el-dialog>
        <!-- 选择学校 -->

        <!-- /分页 -->
        <div class="pagination-wrapper clearfix">
            <el-checkbox
                v-model="checkedAll"
                :indeterminate="checkIndeterminate"
                @change="fnChangeChecked"
            >全选</el-checkbox>
            <el-button
                type="text"
                @click=" dialogVisiblBrowse = true "
                :disabled="multipleSelection.length == 0 ? true : false"
            >设置视频自动增长量</el-button>
            <el-button
                type="text"
                @click="fnRemoveVolum()"
                :disabled="multipleSelection.length == 0 ? true : false"
            >移除视频自动增长量</el-button>
            <el-button
                type="text"
                @click="fnSetSchool()"
                :disabled="multipleSelection.length == 0 ? true : false"
            >设置学校权限</el-button>
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        var checkCover = (rule, value, callback) => {
            if (this.formEdit.file_cover == '') {
                callback(new Error('请上传封面图'));
            } else {
                callback();
            }
        };
        var checkUploadFile = (rule, value, callback) => {
            if (this.formEdit.fileList.length <= 0) {
                callback(new Error('请上传文件'));
            } else {
                callback();
            }
        };
        var checkArray = (rule, value, callback) => {
            if (!value || value.length == 0) {
                callback(new Error(rule.message));
            } else {
                callback();
            }
        };
        var checkNumver = (rule, value, callback) => {
            if (value < 0) {
                callback(new Error(rule.message));
            } else {
                callback();
            }
        };

        return {
            indexError: 0,
            isSchool: true,
            course_no: '',
            filter_status: 1,
            school_filter_status: 99,
            filterList: [{
                value: 99,
                label: '全部'
            },{
                value: 1,
                label: '是'
            },{
                value: 0,
                label: '否'
            }],
            hire_no: '',
            cate_no: '',
            browse: '',
            browseList: [{
                autoinc_no: 1,
                inc_count_min: 100,
                inc_count_max: 200
            },{
                autoinc_no: 2,
                inc_count_min: 200,
                inc_count_max: 400
            }],
            dialogVisiblBrowse: false,
            checkIndeterminate: false,
            multipleSelection: [],
            checkedAll: false,
            showList: [{
                value: '',
                label: '全部'
            },{
                value: 1,
                label: '已显示'
            },{
                value: 0,
                label: '已隐藏'
            }],
            upperList: [{
                value: '',
                label: '全部'
            },{
                value: 1,
                label: '已上架'
            },{
                value: 0,
                label: '已下架'
            }],
            browerlist: [{
                value: '',
                label: '全部'
            },{
                value: 1,
                label: '是'
            },{
                value: -1,
                label: '否'
            }],
            classList: [],
            categoryList: [],
            header: {
                company: '',
                class: '',
                brower: '',
                upper: '',
                show: ''
            },
            fileType: '',
            setJump: '请选择',
            list: [],
            link: '',
            param: [],
            paramCont: [],
            options: [],
            linkSelectData: [],
            formData: {
                app_action: '',
                jump_url: '',
                form_name: ''
            },
            tabName: '',
            sereen: '',
            types: [],
            typeProps: {
                value: 'no',
                label: 'title',
                children: 'children',
            },
            filterData: {
            },
            tableData: [],
            dialogEditVisible: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            formEdit: {
                courseType: [],
                fileList: [],
                file_name: '',
                course_no: "",
                type_no: "",
                parent_type_no: "",
                course_name: "",
                file_size: 0,
                file_ext: "",
                file_cover: "",
                course_sort_global: 10,
                hire_no: '',
                course_view_base: ''
            },
            rules: {
                course_name: [
                    { required: true, message: '请输入课程名称', trigger: 'blur' },
                    { min: 1, max: 40, message: '名称长度不超过40个字', trigger: 'blur' }
                ],
                courseType: [
                    { required: true, message: '请选择课程分类', trigger: 'blur' },
                    { validator: checkArray, message: '请选择课程分类', trigger: 'change' }],
                fileList: [
                    { required: true, message: '请上传文件', trigger: 'blur' },
                    { validator: checkUploadFile, trigger: 'change' }
                ],
                course_sort_global: [
                    { required: true, message: '请输入排序号', trigger: 'blur' },
                    { validator: checkNumver, message: '请输入正整数', trigger: 'blur' }
                ],
                file_cover: [
                    { validator: checkCover, message: '请上传封面图', trigger: 'change' }
                ],
                hire_no: [
                    { required: true, message: '请选择企业名称', trigger: 'blur' },
                    { validator: checkArray, message: '请选择企业名称', trigger: 'change' }
                ]
            },
            uploadingFile: false,
            currTime: 0,
            cancel: null,
            needComplete: false,
            cover: '',
            loading: false,
            chooseDisable: false,
            shopListChoose: [],
            pathName: '',
            // 添加学校权限
            showChooseSchool: false,
            selectedCity: [],
            cities: [],
            searchKey: '',
            // 弹窗当前显示学校集合
            schoolList: [],
            // 当前选中的学校
            selectedSchools: [],
            //所有学校集合
            city_schools: {},
            props: {
                value: 'id',
                label: 'name',
                children: 'children'
            },
            //
        };
    },
    watch: {
        //关闭弹窗清空数据
        dialogEditVisible (val) {
            if (!val) {
                this.formData.jump_url = this.formData.app_action = this.ifSelect = this.fileType = '';
            }
        },
        dialogVisiblBrowse (val) {
            if (!val) {
                this.browse = '';
            }
        },
        showChooseSchool (val) {
            this.fnGetSchoolList();
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.pathName = from.name;
        });
    },
    mounted() {
        this.fnGetSchoolList();
        this.fnParamUrl();
        this.fnRecord();
        this.getTypes();
        this.getTableData();
        this.getappAcion();
        this.setHeader();
    },
    destroyed(){
        window.removeEventListener('popstate', this.fnGoBack, false);
    },
    methods: {
        /**
         * 设置header
         */
        setHeader () {
            this.$store.commit('SET_HEADER', [{title: "APP后台",},{title: "学习",},{title: '课程列表'}]);
        },

        /**
         * 学校权限
         */
        fnChangeCity() {
            if (this.selectedCity.length >= 2) {
                this.schoolList = this.city_schools['city_' + this.selectedCity[1]];
                this.searchKey = '';
            } else {
                this.schoolList = [];
                this.searchKey = '';
            }
        },
        fnSearchSchool() {
            if (this.selectedCity.length >= 2) {
                this.schoolList = this.city_schools['city_' + this.selectedCity[1]].filter(item => {
                    if (!this.searchKey) {
                        return true;
                    }
                    return item.name.indexOf(this.searchKey) > -1;
                });
            } else {
                this.schoolList = [];
            }
        },
        fnGetSchoolList() {
            this.$post('/student/local_info%5Cschool_tree', {
            }, resp => {
                if (resp.code == 1) {
                    // 将学校与省市剥离,方便显示以及遍历
                    let tree = resp.data.tree;
                    let cityTmp = [];
                    let schoolTmp = {};

                    tree.forEach(item => {
                        let provinceTmp = {
                            id: item.id,
                            name: item.name,
                            children: []
                        };

                        if (item.children) {
                            item.children.forEach((city) => {
                                provinceTmp.children.push({
                                    id: city.id,
                                    name: city.name
                                });
                                schoolTmp['city_' + city.id] = city.children;
                            });
                        }
                        cityTmp.push(provinceTmp);
                    });

                    this.cities = cityTmp;
                    this.city_schools = schoolTmp;
                    this.selectedCity = [12, 88];
                    this.fnChangeCity();
                }
            });
        },

        /**
         * 批量设置学校权限
         */
        fnSetSchool () {
            this.isSchool = false;
            this.selectedSchools = [];
            this.showChooseSchool = !this.showChooseSchool;
        },

        /**
         * 移除学校
         */
        handleClose (tag) {
            this.selectedSchools.splice(this.selectedSchools.indexOf(tag), 1);
        },

        /**
         * 获取数据
         */
        getTableData(page) {
            this.$post('/student/course%5Cget_list', {
                page_id: page || this.page.now_page,
                status: this.tabName,
                cate_no: this.cate_no,
                type_no: this.header.class.length == 1 ? this.header.class[0]: '' ,
                sub_type_no: this.header.class.length == 2 ? this.header.class[1] : '',
                auto_increase: this.header.brower,
                course_status: this.header.upper,
                course_show_home: this.header.show,
                hire_no: this.hire_no,
                keyword: this.header.company,
                school_filter_status: this.school_filter_status
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 单个设置学校权限
         */
        fnSetAuthor (row) {
            this.course_no = row.course_no;
            this.isSchool = true;
            this.$post('/student/course%5Cget_school_filter',{
                course_no: row.course_no,
            },resp => {
                if (resp.code == 1) {
                    let school = [];

                    this.filter_status = resp.data.school_filter_status;
                    resp.data.school_filter_school_ids.map(item => {
                        this.schoolList.map(option => {
                            if (item == option.id) {
                                school.push(JSON.stringify({
                                    id: option.id,
                                    name: option.name
                                }));
                            }
                        });
                    });
                    this.selectedSchools = school;
                    this.showChooseSchool = !this.showChooseSchool;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 确定设置过滤学校
         */
        fnSchooldAuthor () {
            let school_filter_school_ids = [];

            if (Object.keys(this.selectedSchools).length >= 1 ) {
                this.selectedSchools.map(item=>{
                    school_filter_school_ids.push(
                        JSON.parse(item).id
                    );
                });
            }

            if (this.isSchool) {
                this.$post('/student/course%5Cset_school_filter',{
                    course_no: this.course_no,
                    school_filter_status: this.filter_status,
                    school_filter_school_ids: school_filter_school_ids.length > 0 ? school_filter_school_ids.join() : ''
                },resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.showChooseSchool = !this.showChooseSchool;
                        this.$message({
                            type: 'success',
                            message: '设置成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'waring',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            } else {
                this.multipleSelection.map(item => {
                    this.$post('/student/course%5Cset_school_filter',{
                        course_no: item.course_no,
                        school_filter_status: this.filter_status,
                        school_filter_school_ids: school_filter_school_ids.length > 0 ? school_filter_school_ids.join() : ''
                    },resp => {
                        if (resp.code == 1) {
                            this.getTableData();
                        } else {
                            this.indexError ++;

                        }
                    });
                });

                setTimeout(()=>{
                    if (this.indexError > 0) {
                        this.$message({
                            type: 'waring',
                            message: `设置失败${this.indexError}个`,
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'success',
                            message: '设置成功',
                            center: true
                        });
                    }
                    this.indexError = 0;
                    this.showChooseSchool = !this.showChooseSchool;
                },500);
            }
        },

        /**
         * 跳转浏览量自增长
         */
        fnGobrowse () {
            this.$router.replace({
                name: 'workBrowse'
            });
        },

        /**
         * 记录上一页路由,监听页面返回并重定向
         */
        fnRecord () {
            if (window.history && window.history.pushState) {
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', this.fnGoBack, false);
            }
        },

        /**
         * 获取路由参数
         */
        fnParamUrl () {
            let query = this.$route.query;

            if (query.cate_no !== undefined) {
                this.cate_no = query.cate_no;
            }

            if (query.type_no !== undefined) {
                this.header.class = [
                    query.type_no
                ];
            }

            if(query.sub_type_no !== undefined) {
                this.header.class = [
                    '',
                    query.sub_type_no
                ];
            }

            if(query.course_no !== undefined) {
                this.header.company = query.course_no;
            }
        },


        /**
         * 上一页重定向
         */
        fnGoBack  () {
            this.$router.replace({ name: this.pathName });
        },

        /**
         * 确定设置增长量
         */
        fnConfirmBrowse () {
            if (this.browse == '') {
                this.$message({
                    type:'waring',
                    message: '请选择自动增长量,不可以为空',
                    center: true
                });
                return;
            }

            this.multipleSelection.map(item=>{
                this.$post('/student/course_autoinc%5Cset_course_autoinc',{
                    autoinc_no: this.browse,
                    course_no: item.course_no
                },resp=>{
                    if (resp.code == 1) {
                        //
                    } else {
                        this.$message({
                            type: 'waring',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            });
            this.dialogVisiblBrowse = !this.dialogVisiblBrowse;
            this.$message({
                type: 'success',
                message: '设置成功',
                center: true
            });

            setTimeout(()=>{
                this.getTableData();
            },150);
        },

        /**
         * 查看视频
         */
        fnOpenvideo (row) {
            if (row.file_url !== '') {
                window.open(row.file_url);
            }
        },

        /**
         * 移除视频自动增长
         */
        fnRemoveVolum () {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.multipleSelection.map(item=>{
                    this.$post('/student/course_autoinc%5Cunset_course_autoinc',{
                        course_no: item.course_no
                    },resp=>{
                        if (resp.code == 1) {
                            //
                        } else {
                            this.$message({
                                type: 'waring',
                                message: resp.msg,
                                center: true
                            });
                        }
                    });
                });
                this.$message({
                    type: 'success',
                    message: '移除成功',
                    center: true
                });
                setTimeout(()=>{
                    this.getTableData();
                },100);
            });
        },

        /**
         * 设置上架状态
         */
        fnSetModify (row) {
            this.$post('/student/course%5Cmodify',{
                course_no: row.course_no,
                course_status: row.course_status
            }, resp=> {
                if (resp.code == 1) {
                    this.$set(row, 'course_status', row.course_status);
                    this.$message({
                        type: 'success',
                        message: '设置成功',
                        center: true
                    });
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 选择Checkbox
         */
        fnSelect(selection) {
            if(selection.length == this.tableData.length) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnSelectAllTop(selection) {
            if(selection.length > 0) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnChangeChecked() {
            if(this.checkedAll){
                this.toggleSelection(1);
            }else{
                this.toggleSelection();
            }
        },
        toggleSelection(rows) {
            if (rows) {
                this.$refs.studeyList.toggleAllSelection();
            } else {
                this.$refs.studeyList.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        /**
         * app行为数据处理
         */
        getappAcion () {
            let arr = [];
            let param = '';
            let val = '';

            this.$post('/student/app_action%5Cget_cascade_list', {
            }, resp => {
                if (resp.code == 1) {
                    resp.data.list.map((item,index)=>{
                        arr.push({
                            value: item.action,
                            label: item.title,
                            children: []
                        });
                        item.target_list.map((itm, idx) => {
                            val = {
                                target: itm.target,
                                param: []
                            };
                            itm.param_list.map((option,i)=> {
                                val.param.push({
                                    param: option.param,
                                    title: option.title,
                                    type: option.form_type
                                });
                            });
                            arr[index].children.push({
                                value: JSON.stringify(val),
                                label: itm.title
                            });
                        });
                    });
                }
                this.linkSelectData = arr;
            });
        },

        /**
         * 清空链接
         */
        fnClearApp () {
            this.formData.app_action = this.formData.jump_url = '';
            this.list = [];
            this.link = '';
        },

        /**
         * app链接数据处理
         */
        handleChange () {
            let app_action = this.formData.app_action;
            let obj = JSON.parse(app_action[1]);
            let link = {
                action: '',
                target: '',
                param: {}
            };
            let param = [];

            this.formData.form_name = '';
            this.$set(this.formData, 'jump_url', '');

            if (app_action[0] == 'app_page') { //内部链接
                let param_list = obj.param;

                this.param = this.paramCont = this.list = [];

                if (param_list.length == 1) {
                    for(let i in param_list) {
                        param.push(
                            param_list[i]
                        );
                    }
                    this.list = [''];
                } else if (param_list.length == 2) {
                    param_list.map(item=>{
                        param.push({
                            type: 'select',
                            param: item.param,
                            title: item.title,
                            target: obj['target']
                        });
                    });
                    this.list = ['',''];
                }

                this.paramCont = param;

                if (this.paramCont.length == 0) {
                    this.$message({
                        type: 'warning',
                        message: '暂时不支持,延后添加',
                        center: true
                    });
                    return;
                }

                this.options = [];
                this.paramCont.map((item,index)=>{
                    if (item.type == 'select') {
                        this.$post('/student/app_action%5Cget_param_item_list',{
                            action: 'app_page',
                            target: obj['target'],
                            param: item.param
                        },resp => {
                            if (resp.code == 1 ) {
                                if (this.paramCont.length == 1) {
                                    this.options.push(
                                        resp.data.list
                                    );
                                } else if (this.paramCont.length == 2){ // 设置顺序
                                    if (item.param == 'form_no') {
                                        this.options.push(
                                            resp.data.list
                                        );
                                    }
                                    if (item.param == 'scene_key') {
                                        setTimeout(()=>{
                                            this.options.push(
                                                resp.data.list
                                            );
                                        },200);
                                    }
                                }
                            } else if (resp.code == 0) {
                                this.options = [];
                            }
                        });
                        link.param[[item['param']]] = this.formData.jump_url;
                    }
                    if (item.type == 'text') {
                        link.param[[item['param']]] = this.formData.form_name;
                    }

                    link.action = app_action[0];
                    link.target = obj['target'];
                });
            } else if (app_action[0] == 'link_outer') { //外部链接
                this.paramCont = [];
                this.ifSelect = 'text';
                this.param = obj.param;

                //链接赋值
                link = {
                    action: app_action[0],
                    target: obj['target'],
                    param: {
                        url : this.formData.jump_url
                    }
                };
            } else {
                return;
            }
            this.link = link;
        },

        /**
         * @abstract  单链接text_select处理
         */
        getJump (url) {
            let param = {};

            this.$set(this.formData, 'jump_url', url);
            for(let key in this.link['param']) {
                param[key] = url;
            }

            this.link['param'] = param;
            console.log(JSON.stringify(this.link), 'app_action');
        },

        /**
         * @abstract  双链接select处理
         */
        getLink () {
            let param = {};

            //保证param字段不重复，否则值会被覆盖
            this.paramCont.map((item,index)=>{
                param[item.param] = this.list[index];
            });

            this.link['param'] = param;
            console.log(JSON.stringify(this.link), 'app_action');
        },

        /**
         * 通过/不通过
         */
        fnChangeVerifyStatus(item, type) {
            if(type == 0) {
                this.$prompt('', '不通过理由', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '请输入不通过理由'
                }).then(({ value }) => {
                    this.$post('/student/course%5Caudit', {
                        action: 'fail',
                        course_no: item.course_no,
                        reason: value
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '申请已拒绝',
                                center: true
                            });
                            this.getTableData(this.page.now_page);
                        }
                    });
                }).catch(() => {
                });
            }else{
                this.$post('/student/course%5Caudit', {
                    action: 'pass',
                    course_no: item.course_no
                }, resp => {
                    if (resp.code == 1) {
                        this.$message({
                            type: 'success',
                            message: '审核已通过',
                            center: true
                        });
                        this.getTableData(this.page.now_page);
                    }
                });
            }
        },

        /**
         * 企业名称搜索
         */
        fnSearchShop(word) {
            if(word != '') {
                this.loading = true;
                this.$post('/wei4/hire_user%5Csuggest', {
                    keyword: word
                }, resp => {
                    if (resp.code == 1) {
                        let list = [];

                        resp.data.list.map((item,index) => {
                            list.push({
                                shop_no: item.hire_no,
                                shop_title: item.company_name
                            });
                        });
                        this.shopListChoose = list;
                    }
                });

                this.loading = false;
            }else{
                this.shopListChoose = [];
            }
        },

        /**
         * 选择企业
         */
        handleSelect(no) {
            this.shopListChoose.map((item, index) => {
                if(item.shop_no == no) {
                    this.formEdit.hire_no = item.shop_no;
                }
            });

        },

        /**
         * 获取筛选数据
         * @param       {Array}     categoryList        //  类目组
         * @param       {Array}     classList           //  一二级类目
         * @param       {Array}     browseList          //  自动增长量
         */
        getTypes(){
            let list = [];

            this.$post('/student/course_cate%5Cget_list', {}, resp => {
                if (resp.code == 1) {
                    this.categoryList = resp.data.list;
                }
            });

            this.$post('/student/course_type%5Cget_list_linkage', {}, resp => {
                if (resp.code == 1) {
                    resp.data.list.map((item,index)=>{
                        list.push({
                            value: item.no,
                            label: item.title,
                            children: []
                        });
                        item.children.map(option=>{
                            list[index].children.push({
                                value: option.no,
                                label: option.title
                            });
                        });
                    });

                    this.classList = list;
                }
            });

            this.$post('/student/course_autoinc%5Cget_list', {}, resp => {
                if (resp.code == 1) {
                    this.browseList = resp.data.list;
                }
            });
        },

        /**
         *  编辑数据回流
         */
        fnGetCourseDetail(course_no) {
            this.$post('/student/course%5Cget', {
                course_no: course_no
            }, resp => {
                if (resp.code == 1) {
                    let json = resp.data;

                    json.fileList = [{
                        name: json.file_name,
                        url: json.file_path,
                        percent: 100
                    }];
                    this.cover = {
                        url: json.file_cover,
                        status: 'success'
                    };
                    json.courseType = [json.parent_type_no, json.type_no];
                    json.hire_no = json.hire_no;
                    this.formEdit = json;

                    if (resp.data.app_action == '') {
                        this.dialogEditVisible = true;
                        return;
                    }

                    let app_action = JSON.parse(resp.data.app_action);
                    let app = [];

                    this.$post('/student/app_action%5Cget_cascade_list', {}, resp => {
                        if (resp.code == 1) {
                            resp.data.list.map(item => {
                                if (app_action.action == 'link_outer') {
                                    item.target_list.map(itm => {
                                        if (itm.target == app_action.target) {
                                            app.push(
                                                app_action.action,
                                                JSON.stringify({
                                                    target: app_action.target,
                                                    param: [{
                                                        param: itm.param_list[0].param,
                                                        title: itm.param_list[0].title,
                                                        type: itm.param_list[0].form_type
                                                    }]
                                                })
                                            );
                                            this.setApp_action(app,itm.param_list[0].title,app_action.param.url,itm.target);
                                        }
                                    });
                                }

                                if (app_action.action == 'app_page') {
                                    let length = Object.keys(app_action.param).length;

                                    app = [];
                                    app.push(
                                        app_action.action,{
                                            target: app_action.target,
                                            param: []
                                        }
                                    );
                                    item.target_list.map((itm,idx) => {
                                        if (itm.target == app_action.target) {
                                            itm.param_list.map((option,i) => {
                                                app[1].param.push({
                                                    param: option.param,
                                                    title: option.title,
                                                    type: option.form_type
                                                });
                                            });
                                        }
                                    });
                                    setTimeout(()=>{
                                        this.setSelect_action(app,length,app_action.param);
                                    },200);
                                } else {
                                    return;
                                }
                            });
                        }
                    });
                    this.dialogEditVisible = true;
                }
            });
        },

        /**
         * select
         */
        setSelect_action (app,length,url) {
            if (length == 1) {
                let list = JSON.parse(JSON.stringify(app));
                let param = JSON.stringify(app[1]);

                this.paramCont = [{
                    type: 'select',
                    title: list[1].param[0]['title']
                }];
                list[1] = param;
                this.formData.app_action = list;
                this.options = [];
                for(let i in url) {
                    this.$post('/student/app_action%5Cget_param_item_list',{
                        action: 'app_page',
                        target: JSON.parse(list[1]).target,
                        param: i
                    },resp => {
                        if (resp.code == 1 ) {
                            this.options.push(
                                resp.data.list,
                            );
                        } else if (resp.code == 0) {
                            this.options = [];
                        }
                    });
                    this.$set(this.formData, 'jump_url', url[i]);
                    this.link = {
                        "action":"app_page",
                        "target":JSON.parse(list[1]).target,
                        "param":{
                            [i]: url[i]
                        }
                    };
                }
            } else if (length == 2) {
                let data = JSON.parse(JSON.stringify(app));
                let params = JSON.stringify(app[1]);
                let current = [];

                app[1] = params;
                this.formData.app_action = app;

                data[1]['param'].map((item,index)=>{
                    this.paramCont.push({
                        type: 'select',
                        title: item.title,
                        param: item.param,
                        target: data[1].target
                    });
                });

                this.options = [];
                for(let i in url) {
                    this.$post('/student/app_action%5Cget_param_item_list',{
                        action: 'app_page',
                        target: data[1].target,
                        param: i
                    },resp => {
                        if (resp.code == 1 ) {
                            if (i == 'form_no') {
                                this.options.push(
                                    resp.data.list,
                                );
                            }
                            if (i == 'scene_key') {
                                setTimeout(()=>{
                                    this.options.push(
                                        resp.data.list,
                                    );
                                },200);
                            }
                        } else if (resp.code == 0) {
                            this.options = [];
                        }
                    });
                    this.link = {
                        action :"app_page",
                        target : data[1].target,
                        param : url
                    };
                    this.list.push(url[i]);
                }
            }
        },

        /**
         * link_outer
         */
        setApp_action (app,title,url,target) {
            this.formData.app_action = app;
            this.$set(this.formData, 'jump_url', url);
            this.param = [{
                type: 'text',
                title: title
            }];
            this.link = {"action":"link_outer","target":target,"param":{"url":url}};
        },
        // {"action":"app_page","target":"custom_form_custom_scene","param":{"form_no":"fm_5507cab254059","scene_key":"掌大精英可见"}}

        fnUploadRemove(e, fileList) {
            this.formEdit.fileList = [];
            if (this.cancel) {
                this.cancel();
                this.cancel = null;
                this.uploadingFile = false;
            }
        },
        fnGetUploadAuth(name, callback) {
            this.$post('/student/course%5Cupload_auth', {
                file_name: name,
                file_type: 'video'
            }, resp => {
                if (resp.code == 1) {
                    callback(resp.data);
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnUploadFile(event) {
            this.fnGetUploadAuth(event.file.name, (data) => {
                this.formEdit.file_ext = data.ext;
                let file = {
                    name: event.file.name,
                    url: '',
                    percent: 0,
                };

                this.formEdit.fileList = [file];

                //开始上传文件
                let timeTmp = new Date().getTime();

                this.currTime = timeTmp;

                let fd = new FormData();

                fd.append('policy', data.body.policy);
                fd.append('signature', data.body.signature);
                fd.append('file', event.file);
                this.uploadingFile = true;

                this.$upload({
                    url: data.api,
                    data: fd,
                    progress: (e) => {
                        console.log(e);
                        if (this.currTime != timeTmp) {
                            return;
                        }
                        file.percent = e.percent.toFixed(1) * 1;
                    },
                    success: resp => {
                        if (this.currTime != timeTmp) {
                            return;
                        }
                        this.uploadingFile = false;
                        this.cancel = null;
                        if (resp.code == 200) {
                            this.formEdit.file_path = resp.url;
                            this.formEdit.file_name = event.file.name;
                            this.formEdit.file_size = resp.file_size;
                            file.url = resp.url;
                        } else {
                            if (resp.code == -999) {
                                return;
                            }
                            this.$notify.error({
                                title: '错误',
                                duration: 2000,
                                message: resp.msg || '上传失败，请稍后重试'
                            });
                        }
                    }
                });
            });
        },
        fnDialogBeforeClose(done) {
            this.resetForm('formEdit', () => {
                this.formEdit.fileList = [];
                done();
            });
        },
        fnChangeUpload(formName) {
            // console.log(formName);
            // return;
            // if (this.$refs[formName]) {
            //     this.$refs[formName].validateField(['file_list', 'file_name']);
            // }
        },
        submitForm(formName) {
            if(this.cover && this.cover.status != 'success'){
                this.$message({
                    type: 'warning',
                    message: '请等待图片上传完毕',
                    center: true
                });
                return ;
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let post = {
                        course_no: this.course_no || '',
                        type_no: this.formEdit.courseType[1],
                        course_name: this.formEdit.course_name,
                        file_name: this.formEdit.file_name,
                        file_ext: this.formEdit.file_ext,
                        file_path: this.formEdit.file_path,
                        file_size: this.formEdit.file_size,
                        file_cover: this.formEdit.file_cover,
                        course_sort_global: this.formEdit.course_sort_global,
                        hire_no: this.formEdit.hire_no,
                        course_view_base: this.formEdit.course_view_base,
                        app_action: JSON.stringify(this.link)
                    };

                    this.$post('/student/course%5Csave', post, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '操作成功',
                                center: true
                            });
                            this.dialogEditVisible = false;
                            this.resetForm('formEdit', () => {
                                this.dialogEditVisible = false;
                                this.formEdit.fileList = [];
                            });
                            setTimeout(() => {
                                this.getTableData();
                                window.location.reload();
                            }, 100);
                        }else{
                            this.$message({
                                type: 'warning',
                                message: resp.msg,
                                center: true
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    // this.uploadLoading = true;
                    return false;
                }
            });
        },
        resetForm(formName, callback) {
            this.$refs[formName].resetFields();
            callback();
        },

        /**
         *  排序
         */
        fnEditSort(row) {
            this.$prompt('修改排序', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(0|\+?[1-9][0-9]*)$/,
                inputPlaceholder: '请输入序号',
                inputErrorMessage: '请输入正整数',
                closeOnClickModal: false,
            }).then(({ value }) => {
                this.$post('/student/course%5Cmodify', {
                    course_no: row.course_no,
                    course_sort_global: value
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '设置成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'waring',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            });
        },

        /**
         * 显示/隐藏
         */
        fnChangeStatus(row) {
            let status = row.course_show_home == 1 ? 0 : 1;

            this.$post('/student/course%5Cmodify', {
                course_no: row.course_no,
                course_show_home: status
            }, resp => {
                if (resp.code == 1) {
                    this.$set(row, 'course_show_home', status);
                    this.$message({
                        type: 'success',
                        message: '设置成功',
                        center: true
                    });
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 编辑
         */
        fnGoEdit(no, type, param) {
            this.fnEnterEsc();
            if(type == 1) {
                if (no) {
                    this.course_no = no;
                    this.fnGetCourseDetail(no);
                }
            }else{
                this.dialogEditVisible = true;
            }
            // this.fileType = param.file_type;
        },

        /**
         * esc关闭弹窗
         */
        fnEnterEsc () {
            const self = this;

            this.$nextTick(function () {
                document.addEventListener('keyup', function (e) {
                    if (e.keyCode == 27 || e.keyCode == '27') {
                        self.dialogEditVisible = false;
                    }
                });
            });
        },

        /**
         * 删除课程文件
         */
        fnDelete(row) {
            this.$confirm('确认删除该条数据?', '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/course%5Cdelete', {
                    course_no: row.course_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                            center: true
                        });
                    } else if (resp.code == 0) {
                        this.$message({
                            type: 'warning',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            });
        },

        /**
         * 恢复课程文件
         */
        fnRecovery (row) {
            this.$confirm('确认恢复该课程文件?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/course_type%5Crecovery', {
                    course_no: row.course_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'waring',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            });
        },

        /**
        * 列表渲染辅助函数：列表项为空处理
        */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },

        /** 上架状态 */
        statusFormatter(row, column, val) {
            if (val == 1) {
                return '已上架';
            } else {
                return '未上架';
            }
        },
        fnUploadThumb(e) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.thumbUploading = true;
            this.thumbUploadTime = timeTmp;

            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                progress: e.onProgress,
                success: resp => {
                    if (this.thumbUploadTime !== timeTmp) {
                        return;
                    }
                    if (resp.code == 1) {
                        this.formEdit.file_cover = resp.data.url;
                        e.onSuccess({
                            url: resp.data.url,
                            status: 'success'
                        });
                        this.$refs['formEdit'].validateField('file_cover', () => {
                            console.log('success');
                        });
                    } else {
                        // 失败后调用组件error回调,删除对应元素
                        e.onError(resp.msg);
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                    }
                }
            });
        },
        fnChangeUploadThumb(file, fileList) {
            this.cover = file;
        },

        /**
         * 设置表头
         */
        renderHeaderPay(h){
            return h('span', {}, [
                h('span', {}, '学习模块会显示'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '此状态不表示视频本身的显示与否，而是控制其相对工作模块，在学习模块是否要显示。你可以让这里“已隐藏”，来达到该视频仅在工作模块显示，学习则不显示的效果' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
    }
};

</script>

<style lang="less" scoped>
  .course-file-list {
    background-color: #fff;
    padding: 10px 15px 15px 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .empty-wrap {
    text-align: center;
    margin-top: 150px;
    img {
      width: 516px;
    }
    .empty-text {
      text-align: center;
      margin-top: 40px;
    }
  }
    .header {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        // margin-bottom: 10px;
        // width: 100%;
        .header-left{
            display: flex;
            align-items: center;
            height: 32px;
        }
        .header-box {
            display: flex;
            margin-right: 15px;
            margin-top: 10px;
            align-items: center;
            color: #606266;
            &-title {
                margin-right: 2px;
                white-space: nowrap;
            }
        }
    .serach-name{
        width: auto;
        color: #606266;
        margin-right: 15px;
    }
    .right {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .left{
        position: absolute;
        right: 40px;
    }
    .input-unit {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      flex-grow: 0;
      margin-right: 15px;
      &-value {
        width: 200px;
      }
      .lable {
        flex-shrink: 0;
        margin: 0 5px 0 0;
      }
    }
  }
  .headers {
      display: flex;
      justify-content: space-between;
  }
  .table-wrapper {
    flex: 1;
    overflow: hidden;
    .course-name {
      color: #409EFF;
      cursor: pointer;
    }
  }
  .pagination-wrapper .el-pagination {
    margin-top: 10px;
    float: right;
  }
  .course-tab {
    width: 100%;
    margin-right: -100px;
  }
  .course-alert {
    width: calc(100% + 30px);
    padding: 15px 10px;
    margin: -15px -15px 10px;
    &-inner {
      font-size: 14px;
      color: #f5a623;
      a {
        color: #f5a623;
        text-decoration: underline;
      }
    }
    .el-alert__closebtn {
      top: 22px;
    }
  }

  .sort-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    .sort-spliter {
      width: 1px;
      height: 12px;
      background: rgba(235, 235, 235, 1);
      margin: 0 10px;
    }
    .btn-sort {
      font-size: 14px;
      line-height: 1;
      color: #ccc;
      &:hover {
        color: #20a0ff;
      }
    }
  }

  .status.fail {
    color: #f95b56;
  }
  .typeSearch {
      width: 150px;
      margin-right: 30px;
  }
  .screenSearch{
      width: 200px;
      margin-right: 30px;
  }
  .companySearch{
      width: 200px;
  }
  .task-form-clear {
      color: #409EFF;
      cursor: pointer;
      margin-left: 18px;
  }
  .cursor-font {
      color: #409EFF;
      cursor: pointer;
  }
.el-button-provide {
    border: none;
    background: transparent;
    margin-left: -12px;
}
    .el-select-title {
        display: inline-block;
        color: #909399;
        background: #F5F7FA;
        padding: 0 18px;
        border: 1px solid #DCDFE6;
        border-radius: 4px 0 0 4px;
        border-right: none;
        height: 32px;
        white-space: nowrap;
    }
    .el-icon-circle-plus-outline {
        font-size: 20px;
        line-height: 32px;
        align-items: center;
        color: #20a0ff;
        cursor: pointer;
    }
    .school-list {
        max-height: 310px;
        overflow: auto;
        .empty {
            text-align: center;
            color: #7e8993;
        }
    }
    .submit-btn {
        margin: 30px auto 0;
        display: block;
    }
    .el-tag-school {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin-bottom: 10px;
        .el-tag{
            margin-right: 10px;
            margin-bottom: 10px;
            height: 32px;
            display: flex;
            align-items: center;
        }
    }
    .el-school-filter {
        display: flex;
        height: 32px;
        align-items: center;
        margin-top: 15px;
    }
</style>
<style lang="less">
  .course-alert {
    .el-alert__closebtn {
      top: 18px;
    }
  }
  .course-file-list .el-table--border td,
  .el-table--border th,
  .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
    border-right: none;
    &:last-child {
      border-right: 1px solid #ebeef5;
    }
  }
  .course-file-list {
    .el-table thead th {
      background: #f4f4f4;
      border-right: none;
      &:last-child {
        border-right: 1px solid #ebeef5;
      }
    }
  }
  .dialog-file-edit {
    .el-form--label-top .el-form-item__label {
      padding: 0;
    }
    .el-dialog__body {
      padding: 30px 40px;

    }
    .dialog-edit-footer {
      text-align: center;
      margin-top: 35px;
    }
    .el-form-item {
      margin-bottom: 20px;
    }
    .el-upload__tip {
      color: #c0c4cc;
      margin-top: 0;
      line-height: 30px;
    }
  }
  .avatar-uploader-course {
      display: inline-block;
      .el-upload--picture-card {
        position: relative;
        width: 155px;
        height: 90px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .state-uploading {
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .el-icon-upload {
        color: #88909c;
      }
      .el-upload-text {
        line-height: 20px;
        color: #88909c;
      }
      .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 2px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .el-upload:hover {
        border-color: #409eff;
      }
      .avatar {
        width: 187px;
        height: 90px;
        display: block;
      }
    }
    .school-list {
        .el-checkbox-button {
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 0;
        }
        .el-checkbox-button:first-child .el-checkbox-button__inner {
            border-radius: 2;
        }
        .el-checkbox-button__inner {
            border-left: 1px solid #dcdfe6;
            font-size: 12px;
            font-weight: 400;
            color: rgba(126, 137, 147, 1);
            border-radius: 2px;
            position: relative;
        }
        .el-checkbox-button.is-checked .el-checkbox-button__inner {
            background-color: #fff;
            border: 1px solid rgba(32, 160, 255, 1);
            color: #20a0ff;
            box-shadow: none;
            overflow: hidden;
            &::after {
                content: " ";
                position: absolute;
                bottom: 0;
                right: 0;
                width: 24px;
                height: 18px;
                background-image: url(//cdn.zsdx.cn/admin/images/common/checked.png);
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
            }
        }
    }
</style>
